Ext.define('HRMobile.view.LoginForm', {
    extend: 'Ext.form.Panel',
    id: 'login',
    requires: ['Ext.TitleBar',
               'Ext.form.FieldSet',
               'Ext.field.Password'],
    controllers: ['LoginController'],
    
    config: {
    	layout: {
            type: 'vbox',
            align: 'start',
            pack: 'center'
        },
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'HREntry Mobile Version',
        },
        {
            xtype: 'fieldset',
            width: Ext.os.is.Phone?280:380,
            margin: 'auto',
            items: [{
                xtype: 'textfield',
                label: 'Username:',
                labelWidth: '35%',
                id: 'txtUserName',
                listeners: {
                	
                    keyup: function(fld, e){
                    	var canLogin = Ext.getCmp('txtUserName').getValue().trim() != '' && Ext.getCmp('txtPassword').getValue().trim() != '';
                    	if (!canLogin)
                    		{
	                    		Ext.getCmp('btnLogin').disable();
	                    		return;
                    		}
                    		
                    	Ext.getCmp('btnLogin').enable();
                        //if user hits return button or keyboard-down button
                        if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                            e.stopEvent();
                            fld.element.dom.blur(); //hide keyboard
                            window.scrollTo(0,0); // Scroll to top (for android)
                            Ext.getCmp('btnLogin').fireEvent('tap');
                        }
                    }
                }
            },
            {
                xtype: 'passwordfield',
                label: 'Password:',
                labelWidth: '35%',
                id: 'txtPassword',
                listeners: {
                    keyup: function(fld, e){
                    	var canLogin = Ext.getCmp('txtUserName').getValue().trim() != '' && Ext.getCmp('txtPassword').getValue().trim() != '';
                    	if (!canLogin)
                		{
                    		Ext.getCmp('btnLogin').disable();
                    		return;
                		}
                    	Ext.getCmp('btnLogin').enable();
                    	
                        //if user hits return button or keyboard-down button
                        if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                            e.stopEvent();
                            fld.element.dom.blur(); //hide keyboard
                            window.scrollTo(0,0); // Scroll to top (for android)
                            Ext.getCmp('btnLogin').fireEvent('tap');
                        }
                    }
                }
            }]//end fieldset items
        },
        {
            xtype: 'button',
            id: 'btnLogin',
            width: 150,
            text: 'Log In',
            margin: '15px auto',
            ui: 'action',    
            disabled: 'true'
        }]//end panel items
    }
});